<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地址添加/修改页面</title>
  <link rel="stylesheet" href="static/css/index.css">
  <script type="text/javascript" src="static/js/cookie_utils.js" ></script>
  <script type="text/javascript" src="static/js/axios.min.js" ></script>
  <script type="text/javascript" src="static/js/vue.js" ></script>
  <script src="static/js/index.js"></script>
  <script type="text/javascript" src="static/js/base.js" ></script>
</head>

<body>
  <div id="app">

    <el-tabs type="border-card" label-width="80px" style="width: 600px;">
      <el-tab-pane label="用户地址管理" >
        <template>
          <el-form class="demo-ruleForm" label-width="80px" >
            <el-form-item label="姓名">
              <el-input v-model="addr.receiverName" style="width: 150px;"></el-input>
            </el-form-item>

            <el-form-item label="省/直辖市">
              <el-select v-model="addr.provinceCode" :placeholder="addr.provinceName" @change="showCityList">
                <el-option v-for="item in Province" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市">
              <el-select v-model="addr.cityCode" :placeholder="addr.cityName" @change="showAreaList">
                <el-option v-for="item in City" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区县">
              <el-select v-model="addr.areaCode" :placeholder="addr.areaName">
                <el-option v-for="item in Area" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="详细地址" style="width: 350px;">
              <el-input type="textarea" v-model="addr.address"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="addr.receiverMobile" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit"   v-if="this.id==null">立即创建</el-button>
              <el-button type="primary" @click="onSubmit" v-else>立即修改</el-button>
              <el-button @click="returnTolist">取消</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>

  <script type="text/javascript">

    var vm = new Vue({
      el: "#app",
      data: {
        Province: [],
        City: [],
        Area: [],

        ruleForm: [],
        form: {},
        
        id: null,
        ischange: false,

        pCode: "",
        cCode: "",
        aCode: "",

        token:"",

        addr: {
          receiverName: "",
					userId:"",
          provinceName: "请选择省",
          provinceCode: "",
          cityName: "请选择市",
          cityCode: "",
          areaName: "请选择区",
          areaCode: "",
          address: "",
          receiverMobile: "",
        },
      },

      created() {
        //获取token 和 userID
        this.token = getCookieValue("token");
        console.log("token  "+this.token)
				this.addr.userId = getCookieValue("userId");
        //查当前url并取出url中？后的值
        var url = window.location.toString();
        var arr = url.split("?");
        this.id = arr[1];
        //查Province数据
        var url = baseUrl + "districts";
        axios({
          method: "get",
          url: url,
          params: {
            parent: 86,
          },
        }).then((res) => {
          console.log(res.data.data);
          this.Province = res.data.data;
        });
        //如果url中有id值则查询当前aid的信息
        if (this.id != null) {
          var url1 = baseUrl + "useraddr/find";
          axios({
            method: "get",
            url: url1,
            params: {
              aid: this.id
            },
            headers:{
							token:this.token
						}
          }).then((res) => {
            console.log(res.data.data),
              this.addr = res.data.data;
            //把addr中的provinceCode等值取出并清空
            this.pCode = this.addr.provinceCode;
            this.cCode = this.addr.cityCode;
            this.aCode = this.addr.areaCode;
            this.addr.provinceCode = "";
            this.addr.cityCode = "";
            this.addr.areaCode = "";
          });
        }
      },
      methods: {
        //查当前省所拥有的的市
        showCityList(val) {
          this.ischange = true;
          console.log("查询市");
          this.addr.cityCode = "";
          this.addr.areaCode = "";
          this.addr.cityName = "请选择市";
          this.addr.areaName = "请选择区";

          var url = baseUrl + "districts";
          axios({
            method: "get",
            url: url,
            params: {
              parent: this.addr.provinceCode,
            },
          }).then((res) => {
              this.City = res.data.data
          });
        },
        //查当前市所拥有的的区
        showAreaList(val) {
          console.log("查询区");
          this.addr.areaCode = "";
          this.addr.areaName = "请选择区";

          var url = baseUrl + "districts";
          axios({
            method: "get",
            url: url,
            params: {
              parent: this.addr.cityCode
            },
          }).then((res) => {
              this.Area = res.data.data
          });
        },
        //提交子操作
        sumbit(url, type) {
          axios({
            method: type,
            url: url,
            data: this.addr,
            headers:{
							token:this.token
						}
          }).then((res) => {
            if (res.data.code == 200) {
              if(type=="post"){
                alert("添加成功")
              }else{
                alert("修改成功")
              }
              window.location.href = "user-address.html";
            } else {
              alert("操作失败")
            }
            this.addr = {}
          });
        },
        onSubmit() {
          var url = baseUrl + "useraddr/add_new_address";
          var url1 = baseUrl + "useraddr/update";
          //如果url中没有id值则为添加操作，否则修改操作
          if (this.id == null) {
            this.sumbit(url, "post")
          } else {
            //  判断准备修改的信息地址有没有被修改
            if (this.ischange == true) {
              this.sumbit(url1, "put")
            } else {
              //没有修改则将原provinceCode等放回addr中
              this.addr.provinceCode = this.pCode;
              this.addr.cityCode = this.cCode;
              this.addr.areaCode = this.aCode;
              this.sumbit(url1, "put")
            }
          }
        },
        //返回list页面
        returnTolist() {
          window.location.href = "user-address.html";
        }
      }
    })
  </script>
</body>

</html>